<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
    <title>登录</title>
    <script src="<%=basePath%>js/jquery-3.2.1.min.js"></script>
    <link rel="stylesheet" href="<%=basePath%>layui/css/layui.css" media="all">
    <link rel="stylesheet" href="<%=basePath%>css/adminLogin.css">
    <script src="<%=basePath%>layui/layui.js" type="text/javascript"></script>

</head>
<body>
    <div class="wrap">
        <img src="images/back.jpg" class="imgStyle">
        <div class="loginForm">
            <form>
                <div class="logoHead">
                    <!--<h2 style="margin-top: 15px">房产销售平台管理系统</h2>-->
                </div>
                <div class="usernameWrapDiv">
                    <div class="usernameLabel">
                        <label>用户名:</label>
                    </div>
                    <div class="usernameDiv">
                        <i class="layui-icon layui-icon-username adminIcon"></i>
                        <input id="loginUsername" class="layui-input adminInput" type="text" name="username" placeholder="输入用户名" >
                    </div>
                </div>
                <div class="usernameWrapDiv">
                    <div class="usernameLabel">
                        <label>密码:</label>
                    </div>
                    <div class="passwordDiv">
                        <i class="layui-icon layui-icon-password adminIcon"></i>
                        <input id="loginPassword" class="layui-input adminInput" type="password" name="password" placeholder="输入密码">
                    </div>
                </div>
                <div class="usernameWrapDiv">
                    <div class="usernameLabel">
                        <label>验证码:</label>
                    </div>
                    <div class="cardDiv">
                        <input id="loginCard" class="layui-input cardInput" type="text" name="card" placeholder="输入验证码">
                    </div>
                    <div class="codeDiv">
                        <input id="loginCode" class="layui-input codeInput"  type="button">
                    </div>
                </div>
                <div class="usernameWrapDiv">
                     <div class="roleLabel">
                        <label>角色:</label>
                    </div>
                    <div class="selectDiv">
                        <select id="role" name="role">
		                    <option value="1">学生</option>
		                    <option value="2">老师</option>
		                    <option value="3">管理员</option>    
		                </select>
                	</div>
                    <div class="submitDiv">
                        <input id="loginBtn" type="button" class="submit layui-btn layui-btn-primary" value="登录"></input>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <script>
        layui.use(['layer'],function () {
            var layer = layui.layer;
        })
        $(function () {
            // 页面初始化生成验证码
            window.onload = createCode('#loginCode');
            // 验证码切换
            $('#loginCode').click(function () {
                createCode('#loginCode');
            });
            // 登陆事件
            $('#loginBtn').click(function () {
                login();
            });
            // 注册事件
            $('#loginRegister').click(function () {
                register();
            });
        });
        // 生成验证码
        function createCode(codeID) {
            var code = "";
            // 验证码长度
            var codeLength = 4;
            // 验证码dom元素
            var checkCode = $(codeID);
            // 验证码随机数
            var random = [0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R',
                'S','T','U','V','W','X','Y','Z'];
            for (var i = 0;i < codeLength; i++){
                // 随机数索引
                var index = Math.floor(Math.random()*36);
                code += random[index];
            }
            // 将生成的随机验证码赋值
            checkCode.val(code);
        }
        // 校验验证码、用户名、密码
        function validateCode(inputID,codeID) {
            var inputCode = $(inputID).val().toUpperCase();
            var cardCode = $(codeID).val();
            var loginUsername = $('#loginUsername').val();
            var loginPassword = $('#loginPassword').val();
            if ($.trim(loginUsername) == '' || $.trim(loginUsername).length<=0){
                layer.alert("用户名不能为空");
                return false;
            }
            if ($.trim(loginUsername).length<5 || $.trim(loginUsername).length>10){
                layer.alert("用户名格式错误！正确格式为5~10字符");
                return false;
            }
            if ($.trim(loginPassword) == '' || $.trim(loginPassword).length<=0){
                layer.alert("密码不能为空");
                return false;
            }
            if (inputCode.length<=0){
                layer.alert("验证码不能为空");
                return false;
            }
            if (inputCode != cardCode){
                layer.alert("请输入正确验证码");
                return false;
            }
            return true;
        }
        // 登录流程
        function login() {
            if (!validateCode('#loginCard','#loginCode')){
                //阻断提示
            }else if($('#role').val()==1) {
                var loginUsername = $('#loginUsername').val();
                var loginPassword = $('#loginPassword').val();
                var param = {};
                param.loginUsername = loginUsername;
                param.loginPassword = loginPassword;
                var loginLoadIndex = layer.load(2);
                $('#loginBtn').val("正在登录...");
                $.ajax({
                    type: 'POST',
                    url:"<%=basePath%>stulogin",
                    dataType:'json',
                    data:param,
                    success:function (data) {
                        layer.close(loginLoadIndex);
                        if (data.code == 0){
                        	layer.msg("学生用户登录成功！", {
                        		time: 1000,
                        		end: function(){
                        			  window.location.href = '<%=basePath%>student/stuMain';
                        		}
                        	});  
                        }else{
                        	layer.msg("学生用户登录失败！用户名密码或角色有误", {
                        		time: 2000,
                        		end: function(){
                        			window.location.href = '<%=basePath%>';
                        		}
                        	}); 
                        }
                    },
                    error:function () {
                        layer.close(loginLoadIndex);
                        $('#loginBtn').val("登录");
                    }
                });
                return false;
            }else if($('#role').val()==2) {
                var loginUsername = $('#loginUsername').val();
                var loginPassword = $('#loginPassword').val();
                var param = {};
                param.loginUsername = loginUsername;
                param.loginPassword = loginPassword;
                var loginLoadIndex = layer.load(2);
                $('#loginBtn').val("正在登录...");
                $.ajax({
                    type: 'POST',
                    url:"<%=basePath%>teacherlogin",
                    dataType:'json',
                    data:param,
                    success:function (data) {
                        layer.close(loginLoadIndex);
                        if (data.code == 0){
                        	layer.msg("教师用户登录成功！", {
                        		time: 1000,
                        		end: function(){
                        			  window.location.href = '<%=basePath%>teacher/teacherMain';
                        		}
                        	});  
                        }else{
                        	layer.msg("教师用户登录失败！用户名密码或角色有误", {
                        		time: 2000,
                        		end: function(){
                        			window.location.href = '<%=basePath%>';
                        		}
                        	}); 
                        }
                    },
                    error:function () {
                        layer.close(loginLoadIndex);
                        $('#loginBtn').val("登录");
                    }
                });
                return false;
            }else if($('#role').val()==3) {
                var loginUsername = $('#loginUsername').val();
                var loginPassword = $('#loginPassword').val();
                var param = {};
                param.loginUsername = loginUsername;
                param.loginPassword = loginPassword;
                var loginLoadIndex = layer.load(2);
                $('#loginBtn').val("正在登录...");
                $.ajax({
                    type: 'POST',
                    url:"<%=basePath%>adminlogin",
                    dataType:'json',
                    data:param,
                    success:function (data) {
                        layer.close(loginLoadIndex);
                        if (data.code == 0){
                        	layer.msg("管理员用户登录成功！", {
                        		time: 1000,
                        		end: function(){
                        			window.location.href = '<%=basePath%>admin/adminMain';
                        		}
                        	});     
                        }else{
                        	layer.msg("管理员用户登录失败！用户名密码或角色有误", {
                        		time: 2000,
                        		end: function(){
                        			window.location.href = '<%=basePath%>';
                        		}
                        	}); 
                        }
                    },
                    error:function () {
                        layer.close(loginLoadIndex);
                        $('#loginBtn').val("登录");
                    }
                });
                return false;
            }
        }
    </script>

</body>
</html>
